<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Animation - Basic</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  <script type="module">
    const forceCSSAnimations = new URLSearchParams(window.location.search).get('ionic:_forceCSSAnimations');
    if (forceCSSAnimations) {
      Element.prototype.animate = null;
    }
    
    import { createAnimation } from '../../../../dist/ionic/index.esm.js';
    
    const squareA = document.querySelector('.square-a');
    const squareB = document.querySelector('.square-b');
    const squareC = document.querySelector('.square-c');
    const squareCText = document.querySelectorAll('.square-c .text');
    const squareCSubText = document.querySelectorAll('.square-c .text-sub');
    
    const rootAnimation = createAnimation();
    const animationA = createAnimation();
    const animationB = createAnimation();
    const animationC = createAnimation();
    const animationCSubA = createAnimation();
    const animationCSubB = createAnimation();
    
    squareA.addEventListener('ionAnimationFinished', (e) => {
      console.log(e.detail);
    })
    
    animationA
      .addElement(squareA)
      .duration(250)
      .delay(1750)
      .easing('linear')
      .iterations(1)
      .keyframes([
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 0 },
        { transform: 'scale(1.5) rotate(45deg)', opacity: 0.5, offset: 0.5 },
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 1 }
      ])
      .beforeStyles({
        'background': 'rgba(0, 0, 255, 0.5'
      })
      .afterStyles({
        'background': 'rgba(0, 255, 0, 0.5)'
      })
      .onFinish(() => {
        const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationAFinished' });
        squareA.dispatchEvent(ev);
      });
      
    animationB
      .addElement(squareB)
      .duration(250)
      .delay(500)
      .easing('ease-in-out')
      .iterations(1)
      .keyframes([
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 0 },
        { transform: 'scale(0.5) rotate(-45deg)', opacity: 0.5, offset: 0.5 },
        { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 1 }
      ])
      .beforeStyles({
        'background': 'rgba(0, 0, 255, 0.5'
      })
      .afterStyles({
        'background': 'rgba(0, 255, 0, 0.5)'
      })
      .onFinish(() => {
        const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationBFinished' });
        squareA.dispatchEvent(ev);
      });
  
    animationC
      .addElement(squareC)
      .duration(500)
      .delay(250)
      .easing('ease-in-out')
      .iterations(1)
      .keyframes([
        { transform: 'scale(1) skew(0deg)', opacity: 1, offset: 0 },
        { transform: 'scale(1.5) skew(15deg)', opacity: 0.5, offset: 0.5 },
        { transform: 'scale(1) skew(0deg)', opacity: 1, offset: 1 }
      ])
      .beforeStyles({
        'background': 'rgba(0, 0, 255, 0.5'
      })
      .afterStyles({
        'background': 'rgba(0, 255, 0, 0.5)'
      })
      .onFinish(() => {
        const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationCFinished' });
        squareA.dispatchEvent(ev);
      });
      
    animationCSubA
      .addElement(squareCText)
      .duration(250)
      .delay(1000)
      .fromTo('color', 'red', 'blue')
      .onFinish(() => {
        const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationCSubAFinished' });
        squareA.dispatchEvent(ev);
      });
      
    animationCSubB
      .addElement(squareCSubText)
      .onFinish(() => {
        const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationCSubBFinished' });
        squareA.dispatchEvent(ev);
      });
      
    animationC.addAnimation([animationCSubA, animationCSubB]);
    
    rootAnimation
      .addAnimation([animationA, animationB, animationC])
      .fill('none')
      .onFinish(() => {
        const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationRootFinished' });
        squareA.dispatchEvent(ev);
      });
        
    document.querySelector('.play').addEventListener('click', () => {
      rootAnimation.play();
    });
    
    document.querySelector('.pause').addEventListener('click', () => {
      rootAnimation.pause();
    });
    
    document.querySelector('.destroy').addEventListener('click', () => {
      rootAnimation.destroy();
    });
    
    document.querySelector('.stop').addEventListener('click', () => {
      rootAnimation.stop();
    });
  </script>
  
  <style>
    .square {
      width: 100px;
      height: 100px;
      background: rgba(0, 0, 255, 0.5);
      text-align: center;
      line-height: 100px;
      margin-left: 25px;
      margin-top: 25px;
      margin-bottom: 25px;
      position: relative;
    }
    .circle {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background-color: black;
      position: absolute;
      margin: 0 auto;
      top: 10px;
      left: 0;
      right: 0;
    }
  </style>
  </head>

<body
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>Animations</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content>
      <div class="ion-padding">
        <ion-button class="play">Play</ion-button>
        <ion-button class="pause">Pause</ion-button>
        <ion-button class="stop">Stop</ion-button>
        <ion-button class="destroy">Destroy</ion-button>
        
        <div class="square square-a">
          <div class="text">Hello</div>
        </div>
        
        <div class="square square-b">
          <div class="text">Hello</div>
        </div>
        
        <div class="square square-c">
          <div class="text">Hello</div>
          <div class="circle"></div>
        </div>
      </div>
    </ion-content>
  </ion-app>
</body>

</html>

